<!--
 * @Description: 
 * @Date: 2024-05-15 16:32:00
 * @LastEditTime: 2024-06-06 11:49:33
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '信访服务',
    navigationBarTextStyle: 'white', //标题栏字体颜色
    navigationBarBackgroundColor: '#0063AF', //标题栏背景色(纯色)
  },
}
</route>

<template>
  <view class="petitione w-screen h-screen box-border bg-#F4F5F9">
    <wd-notice-bar
      text="提交后，处理结果请前往首页【我的申请】查看~"
      prefix="check-outline"
      type="info"
      custom-class="space"
    />
    <image class="w-screen h-250rpx" :src="banner" mode="scaleToFill" />

    <view class="w-90% mx-auto translate-y--8% bg-#fff rounded-20rpx">
      <view class="p-50rpx grid grid-rows-3 grid-cols-3 gap-40rpx">
        <view
          class="h-160rpx flex flex-col justify-evenly items-center"
          v-for="(item, index) in petitioneMenu"
          :key="index"
          @click="handleMenuClick(item.title, item.type)"
        >
          <view class="p-20rpx rounded-20rpx mb-10rpx" :style="{ background: item.color }">
            <image class="w-80rpx h-80rpx" :src="item.url" mode="scaleToFill" />
          </view>
          <text class="text-24rpx text-#000 font-550">{{ item.title }}</text>
        </view>
      </view>
    </view>
    <!-- <wd-button
      class="bg-#0A4484 mx-20rpx"
      :round="false"
      type="primary"
      size="large"
      @click="handleSubmit"
      block
    >
      提交记录
    </wd-button> -->
  </view>
</template>
<script setup lang="ts">
import icon1 from '../../../static/menu/icon1.png'
import icon2 from '../../../static/menu/icon2.png'
import icon3 from '../../../static/menu/icon3.png'
import icon4 from '../../../static/menu/icon4.png'
import icon5 from '../../../static/menu/icon5.png'
import icon6 from '../../../static/menu/icon6.png'
import icon7 from '../../../static/menu/icon7.png'
import banner from '../../../static/images/banner.jpg'
const petitioneMenu = ref([
  {
    title: '控告',
    color: '#F48886',
    url: icon1,
    type: 1,
  },
  {
    title: '举报',
    color: '#DDC366',
    url: icon2,
    type: 2,
  },
  {
    title: '司法救助',
    color: '#A0A1FD',
    url: icon3,
    type: 3,
  },
  {
    title: '刑事申诉',
    color: '#ADD1F5',
    url: icon4,
    type: 4,
  },
  {
    title: '民事申诉',
    color: '#A8E999',
    url: icon5,
    type: 5,
  },
  {
    title: '行政申诉',
    color: '#E994D7',
    url: icon6,
    type: 6,
  },
  {
    title: '国家赔偿',
    color: '#409CD9',
    url: icon7,
    type: 7,
  },
])
function handleSubmit() {
  uni.navigateTo({
    url: `/pages/menu/subRecord/index?menu=${'信访服务'}`,
  })
}
function handleMenuClick(title, type) {
  uni.navigateTo({
    url: `/pages/menu/notice/index?title=${title}&type=${type}&menu=${'信访服务'}`,
  })
}
</script>
<style lang="scss" scoped>
::v-deep .wd-button {
  margin: 0 30rpx;
  background: #409cd9 !important;
}
</style>
